<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <title>我的 - 数智化赋能“微情境·微宣讲”红色实践活动</title>

  <!-- 引入Swiper CSS -->
  <link rel="stylesheet" href="../templates/h5/assets/swiper-bundle.min.css">
  <!-- 引入Tailwind CSS -->
  <script src="../templates/h5/assets/tailwindcss3.4.17.css"></script>
  <!-- 引入Font Awesome -->
  <link href="../templates/h5/assets/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="../templates/h5/assets/jquery.min.js"></script>
  <script>
    // 配置Tailwind自定义颜色（红色主题）
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#b71211', // 主红色
            secondary: '#FFD700', // 辅助金色
            red: {
              700: '#B91C1C',    // 稍浅红色
              800: '#991B1B',    // 深一点的红色
              900: '#7F1D1D',    // 最深红色
            }
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      /* 导航栏样式 */
      .nav-item {
        @apply flex flex-col items-center justify-center text-gray-300 active:bg-red-800 h-full;
      }
      .nav-item.active {
        @apply text-white;
      }
      .nav-icon {
        @apply text-lg mb-1;
      }
      .nav-text {
        @apply text-xs;
      }
      
      /* 内容区块样式 */
      .user-section {
        @apply bg-red-800 rounded-lg p-4 mb-4 border border-red-700;
      }
      
      /* 登录提示样式 */
      .login-prompt {
        @apply bg-red-800 rounded-lg p-6 border border-red-700 mb-6 text-center relative overflow-hidden;
      }
      .login-prompt::before {
        content: '';
        @apply absolute top-0 left-0 w-full h-1 bg-secondary;
      }
    }
  </style>
</head>
<body class="bg-primary text-white">
  <div class="max-w-md mx-auto min-h-screen flex flex-col">
    <!-- 页面标题栏 -->
    <div class="py-4 px-4 border-b border-red-700 bg-red-900 flex justify-center items-center">
      <h1 class="text-xl font-bold">我的</h1>
    </div>
    
    <!-- 页面内容区 -->
    <div class="flex-1 overflow-y-auto p-4 pb-24">
      <!-- 未登录提示 -->
      <div class="login-prompt">
        <div class="w-20 h-20 mx-auto mb-4 rounded-full bg-red-900 flex items-center justify-center">
          <i class="fa fa-user-o text-3xl text-secondary"></i>
        </div>
        <h2 class="text-xl font-bold mb-2">请登录账号</h2>
        <p class="text-sm text-gray-300 mb-6">登录后可参与活动、提交作品和评分</p>
        
        <!-- 微信授权登录按钮 -->
        <button id="wechatLoginBtn" class="w-full flex items-center justify-center bg-green-500 text-white py-3 rounded-lg font-medium text-sm">
          <i class="fa fa-weixin text-lg mr-2"></i>
          微信授权登录
        </button>
      </div>
      
      <!-- 活动说明 -->
      <div class="user-section">
        <h3 class="text-base font-medium mb-3 flex items-center">
          <i class="fa fa-info-circle text-secondary mr-2"></i>活动说明
        </h3>
        <p class="text-sm text-gray-200 text-justify">
          本次活动面向马克思主义学院全体学生开放，登录后可参与作品提交和互动。通过微信授权即可快速登录，无需单独注册账号。
        </p>
      </div>
    </div>
    
    <!-- 底部固定导航栏 -->
    <div class="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-red-900 border-t border-red-700 z-50 h-16 flex">
      <a href="/h5/index" class="nav-item active flex-1">
        <i class="nav-icon fa fa-home"></i>
        <span class="nav-text">首页</span>
      </a>
      <a href="/h5/index_huodong" class="nav-item flex-1">
        <i class="nav-icon fa fa-calendar"></i>
        <span class="nav-text">活动</span>
      </a>
      <a href="/h5/index_paihangbang" class="nav-item flex-1">
        <i class="nav-icon fa fa-bar-chart"></i>
        <span class="nav-text">排行榜</span>
      </a>
      <a href="/h5/index_yonghu" class="nav-item flex-1">
        <i class="nav-icon fa fa-user"></i>
        <span class="nav-text">我的</span>
      </a>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // 导航栏切换效果
      const navItems = document.querySelectorAll('.nav-item');
      navItems.forEach(item => {
        item.addEventListener('click', function(e) {
          //e.preventDefault();
          navItems.forEach(nav => nav.classList.remove('active'));
          this.classList.add('active');
        });
      });
      
      // 微信授权登录按钮事件
      document.getElementById('wechatLoginBtn').addEventListener('click', function() {
        // 实际项目中这里会调用微信授权登录接口
        alert('正在跳转到微信授权页面...');

        $.get("/api/wechat/getAuthUrl", function(authUrl) {
          // 跳转至微信授权页（用户扫码/确认授权）
          window.location.href = authUrl;
        }).fail(function(xhr) {
          alert("获取授权链接失败：" + xhr.responseText);
        });

      });
    });
  </script>
</body>
</html>